<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


        <p>
            <input type="text" name="username" id="username">用户名:
        </p>
        <p>
            <input type="text" name="password" id="password">密码:
        </p>
        <div></div>
        <button id="btn">提交</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>        
        $('#btn').click(function () {
            var username = $("#username").val();
            var password = $("#password").val();
      
              //超后端发送Ajax请求
            $.ajax({
                //1.指定向那个后端发送ajax请求
                url: 'http://127.0.0.1:8000/index',//不写就是向当前地址提交请求
                //2.请求方式需要指定
                type: 'post', //不指定默认get,小写即可。
                //3.数据,自定义对象
                data: { 
                    'username': username, 
                    'password': password
                 },
                //4.异步回调机制,回调函数：当后端返回结果是会自动触发，arg接收后端的返回结果
                success: function (args) {
                   console.log(args);
                }
            })
        })

    </script>
</body>

</html>